<template>
    <!-- cdfs-历史任务流转信息 -->
    <div class="fillcontain">

        <el-dialog
                title="任务流转信息"
                :visible.sync="drawer"
                :direction="direction"
                :width="'70%'"
                :before-close="handleClose"
                center>
            <div class="contain">

                <!-- 查询结果列表 -->
                <div class="table_container">
                    <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark"
                              highlight-current-row header-cell-class-name="table-header-class"
                              style="width:100%">
                        <el-table-column property="staskno" label="任务号" align='center' min-width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column property="sserialno" label="流转序号" align='center' min-width="120" show-overflow-tooltip></el-table-column>
                        <el-table-column property="spriority" label="优先级" align='center' min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column property="destNode" label="任务节点" align='center' min-width="120" show-overflow-tooltip></el-table-column>
                        <el-table-column property="userName" label="处理人员" align='center' min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column property="processTime" label="开始时间" align='center' min-width="160" show-overflow-tooltip></el-table-column>
                        <el-table-column property="sendtime" label="结束时间" align='center' min-width="160" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <el-row>
                        <el-col :span="24">
                            <div class="pagination">
                                <el-pagination
                                        background
                                        v-if='paginations.total > 0'
                                        :page-sizes="paginations.pageSizes"
                                        :page-size="paginations.pageSize"
                                        :layout="paginations.layout"
                                        :total="paginations.total"
                                        :current-page='paginations.pageIndex'
                                        @current-change='handleCurrentChange'
                                        @size-change='handleSizeChange'>
                                </el-pagination>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import constant from '@/utils/constant';
    import { getCdfsHisChangeList} from "@/api/taskCenter/taskCommon";

    export default {
        name: "cdfs-his-task-change-list",
        data() {
            return {
                // 查询条件
                direction: 'rtl',
                tableData: [],
                loading: false,
                nodeMap: {},//节点对象
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
            }
        },
        created() {
        },
        mounted() {

        },
        props: {
            drawer: {
                type: Boolean,
                default: false
            },
            taskNo: {
                type: String
            },
        },
        methods: {
            handleClose(done) {
                this.$emit('close', this.drawer);
            },

            // 综合查询列表
            getList(taskNo) {
                this.tableData = [];
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                getCdfsHisChangeList(taskNo,this.paginations.pageSize,this.paginations.pageIndex).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList(this.taskNo);
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList(this.taskNo);
            },
        },
        watch: {
            taskNo: function (newValue) {
                if (newValue != undefined && newValue != ''){
                    this.paginations.pageIndex = 1;
                    this.paginations.pageSize = 10;
                    this.getList(newValue);
                }
            },
        },
        computed: {
            ...mapGetters(['tags']),
        },
        activated() {
            if (this.reload) {
                this.$store.dispatch('loading/CHNAGE_RELOAD', false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;

        .svg-icon {
            font-size: 14px;
            fill: #68a3fc;
        }
    }

    .search_container {
        padding: 20px 20px 0 20px;
        border-top: 1px solid #e1e1e1;
    }
</style>



